<template>
  <view class="page">
    <view class="date-range-selector">
      <view
        class="item"
        v-for="item in details.statistical"
        :key="item"
        @click="
          () => {
            currentSelectDateRange = item
            resetPaginationReloadData()
          }
        "
        :class="{ active: item === currentSelectDateRange }"
        >{{ item }}</view
      >
    </view>
    <view class="info">
      <view class="content">
        <view class="title">
          <!--					活动名称-->
          <view>{{ details.rankingListName }}</view>
          <view class="duration">
            <!--					活动时长-->
            <text v-if="details.startEndTimeInterval.y > 0">{{ `${details.startEndTimeInterval.y} year` }}</text>
            <text v-else-if="details.startEndTimeInterval.m > 0">{{ `${details.startEndTimeInterval.m} month` }}</text>
            <text v-else-if="details.startEndTimeInterval.w > 0">{{ `${details.startEndTimeInterval.w} week` }}</text>
            <text v-else>{{ `${details.startEndTimeInterval.d} day` }}</text>
          </view>
        </view>

        <view class="sub-title">
          <text>排行榜 RANKING LIST</text>
        </view>

        <view class="rules">
          <view>活动规则：</view>
          <view>
            <text>{{ details.activityRule }}</text>
          </view>
          <!--					活动时间-->
          <view>{{ `活动时间：${details.startTimeFormat}至${details.endTimeFormat}` }}</view>
        </view>
      </view>
      <!--			排行榜状态-->
      <!--			进行中-->
      <image class="rank-status" :src="rankInProcessIcon" v-if="details.isLock === 0"></image>
      <!--			已封榜-->
      <image class="rank-status" v-else-if="details.isLock === 1" :src="rankInLockIcon"></image>
    </view>
    <view class="rank-list">
      <view class="table-header column">
        <view class="item column-item-1 column-item">排名</view>
        <view class="item column-item-2 column-item">用户</view>
        <view class="item column-item-3 column-item" style="color: #a75b07">打卡天数</view>
        <view class="item column-item-4 column-item" style="color: #a75b07">累计学习时长</view>
      </view>
      <template v-if="recordList.length > 0">
        <view class="rank-item column" v-for="(item, index) in recordList" :key="item.userId">
          <!--					排名-->
          <view class="column-item-1 column-item">
            <view class="rank-num" :class="'rank-num-' + index">{{ index }}</view>
          </view>
          <!--					用户信息-->
          <view class="userInfo column-item-2 column-item">
            <!--						头像-->
            <view class="avatar-container">
              <image class="avatar" :src="getShowImage(item.userIcon)" v-if="item.userIcon"></image>
              <text class="avatar text">{{ item.userName[0] }}</text>
            </view>
            <!--						昵称-->
            <view class="nick-name">{{ item.userName }}</view>
          </view>
          <!--					打卡天数-->
          <view class="duration column-item-3 column-item">
            <text class="number">{{ item.totalCheckInDays }}</text>
            <text>天</text>
          </view>
          <!--					累计学习时长-->
          <view class="duration column-item-4 column-item">
            <!--							时-->
            <template v-if="item.duration.h > 0">
              <text class="number">{{ item.duration.h }}</text>
              <text>h</text>
            </template>

            <!--						分-->
            <template v-if="item.duration.m > 0">
              <text class="number">{{ item.duration.m }}</text>
              <text>min</text>
            </template>

            <!--						秒-->
            <template v-if="item.duration.h === 0">
              <text class="number">{{ item.duration.s }}</text>
              <text>s</text>
            </template>
          </view>
        </view>
        <uni-load-more :status="loadMoreStatusText"></uni-load-more>
      </template>
      <empty v-else height="760rpx"></empty>
    </view>
  </view>
</template>

<script>
import { clearObj, getShowImage } from "@/utils"
import request from "@/utils/request"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import dateUtils from "@/utils/dateUtils"
import moment from "@/lib/moment.min"
import empty from "@/components/empty.vue"
import rankInLockIcon from "./assets/rank_in_lock.png"
import rankInProcessIcon from "./assets/rank_in_process.png"

export default {
  components: {
    uniLoadMore,
    empty,
  },
  data() {
    return {
      details: {
        rankingListId: "",
        rankingListName: "",
        rankingListSort: 0,
        rankingStatistical: "",
        statistical: [],
        isPresent: 0,
        studyActivityId: "",
        activityTypeId: null,
        studyRoomId: 0,
        activityRule: "",
        activityBackground: "",
        isLock: 0,
        startTime: "",
        endTime: "",
        studyRoomUserList: {},
        startEndTimeInterval: {
          d: 0,
          m: 0,
          w: 0,
          y: 0,
        },
        startTimeFormat: "",
        endTimeFormat: "",
      },
      recordList: [],
      currentSelectDateRange: "", //当前选择的日期区间
      pagination: {
        current: 1,
        size: 15,
      },
      loadMoreStatusText: "more",
      rankInLockIcon,
      rankInProcessIcon,
    }
  },
  onLoad(query) {
    this.details = JSON.parse(decodeURIComponent(query.details))
    //默认选中第一个区间
    this.currentSelectDateRange = this.details.statistical[0]
    //动态设置页面标题
    uni.setNavigationBarTitle({
      title: this.details.rankingListName,
    })
    this.resetPaginationReloadData()
  },
  methods: {
    getShowImage,
    // 获取排行榜记录
    getRecordList() {
      return new Promise((resolve, reject) => {
        if (this.loadMoreStatusText === "loading") {
          resolve()
          return
        }
        this.loadMoreStatusText = "loading"
        request({
          url: "studyRankingList/getStatistical",
          data: {
            rankingListId: this.details.rankingListId,
            currentRanking: this.currentSelectDateRange,
            page: this.pagination.current,
            size: this.pagination.size,
          },
          errorHandle: true,
        }).then((data) => {
          //格式化累计学习时长
          for (let record of data.studyRoomUserList.records) {
            record.duration = dateUtils.formatTimeObject2(record.totalStudyDuration)
          }
          this.recordList.push(...data.studyRoomUserList.records)
          this.details = data
          //计算开始时间和结束时间之间的时间间隔
          this.details.startEndTimeInterval = dateUtils.moment.calculateDateInterval(
            moment(this.details.startTime),
            moment(this.details.endTime),
          )
          //格式化活动时间
          const startTime = moment(this.details.startTime)
          this.details.startTimeFormat = `${startTime.get("year")}年${startTime.get("month") + 1}月${startTime.get("date")}日`
          const endTime = moment(this.details.endTime)
          this.details.endTimeFormat = `${endTime.get("month") + 1}月${endTime.get("date")}日`
          console.log(this.details, "this.details")
          if (this.recordList.length >= data.studyRoomUserList.total) {
            this.loadMoreStatusText = "noMore"
          } else {
            this.loadMoreStatusText = "more"
          }
          resolve()
        })
      })
    },
    resetPaginationReloadData() {
      this.pagination.current = 1
      this.recordList = []
      uni.showLoading({
        title: "加载中",
      })
      this.getRecordList().finally(() => {
        uni.hideLoading()
      })
    },
  },
  //滑到底部自动加载下一页
  onReachBottom() {
    if (this.loadMoreStatusText === "noMore") {
      return
    }
    this.pagination.current++
    this.getRecordList()
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f0ede1;
  .date-range-selector {
    display: flex;
    justify-content: space-around;
    padding: 20rpx 50rpx;
    .item {
      font-size: 32rpx;
      position: relative;
      &.active {
        color: #1681f7;
      }
      &.active::after {
        content: "";
        position: absolute;
        bottom: -16rpx;
        left: 0;
        width: 100%;
        height: 6rpx;
        background: #1681f7;
      }
    }
  }
  > .info {
    min-height: 398rpx;
    position: relative;
    background: url("https://kou.gdzmtech.com/pic/QYJ1C9kDbpeH3B9JXhNY.png") no-repeat right bottom;
    background-size: 366.8rpx 250.6rpx;
    .content {
      padding: {
        left: 50rpx;
        top: 40rpx;
      }
      .title {
        font-size: 46rpx;
        font-weight: bold;
        display: flex;
        .duration {
          margin-left: 12rpx;
          color: #a75b07;
        }
      }
      .sub-title {
        font-size: 34rpx;
        font-weight: bold;
        margin-top: 10rpx;
      }
      .rules {
        margin-top: 20rpx;
        font-size: 30rpx;
        color: #5c3205;
        line-height: 1.6;
      }
    }
    .rank-status {
      position: absolute;
      left: 490rpx;
      top: 96rpx;
      width: 147.72rpx;
      height: 133.66rpx;
    }
  }
  > .rank-list {
    background: var(--background-color);
    border-radius: 40rpx;
    padding: 40rpx 30rpx;
    min-height: 920rpx;
    .column {
      display: flex;
      margin-bottom: 30rpx;
      .column-item {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .column-item-1 {
        flex-grow: 1;
        width: 0;
      }
      .column-item-2 {
        flex-grow: 4;
        width: 0;
        margin-left: 20rpx;
      }
      .column-item-3 {
        flex-grow: 2;
        width: 0;
        margin-left: 20rpx;
      }
      .column-item-4 {
        flex-grow: 3;
        width: 0;
        margin-left: 20rpx;
      }
    }
    .table-header {
      .item {
        font-size: 30rpx;
        color: #666060;
      }
    }
    .rank-item {
      .rank-num {
        border: 6rpx solid #bbbbbb;
        font-size: 30rpx;
        border-radius: 6rpx;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #bbbbbb;
        font-weight: bold;
        &.rank-num-0 {
          color: #a70707;
          border-color: #a70707;
        }
        &.rank-num-1 {
          color: #0774a7;
          border-color: #0774a7;
        }
        &.rank-num-2 {
          color: #fbca42;
          border-color: #fbca42;
        }
      }
      .userInfo {
        .avatar-container {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          overflow: hidden;
          .avatar {
            width: 100%;
            height: 100%;
          }
          .text {
            font-size: 30rpx;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #3c3c3c;
          }
        }
        .nick-name {
          margin-left: 16rpx;
          width: 0;
          flex: 1;
          font-size: 30rpx;
          //文本溢出部分自动加省略号
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      .duration {
        font-size: 30rpx;
        .number {
          color: #a75b07;
        }
      }
    }
  }
}
</style>
